<template>
  <div class="home">
    <HeadView></HeadView>
    <DetailHead v-if="isScrolled" class="fixed-detail-head"></DetailHead>
    <MainView></MainView>
    <FootView></FootView>
  </div>
</template>

<script>
// @ is an alias to /src
import HeadView from './components/HeadView.vue';
import MainView from './components/MainView.vue';
import FootView from '@/components/FootView.vue';
import DetailHead from '@/components/DetailHead.vue';

export default {
  name: 'HomeView',
  components: {
    HeadView,
    MainView,
    FootView,
    DetailHead
  },
  data() {
    return {
      isScrolled: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.isScrolled = window.scrollY > 295;
    }
  }
}
</script>

<style scoped>
.fixed-detail-head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
</style>
